<template>
  <div>
    <el-button
      v-if="multipleSelection.length > 0"
      :style="{ margin: '5px 10px' }"
      type="danger"
      @click="() => Subdel()"
      size="large"
    >
      批量删除</el-button
    >
    <br />
    <el-table
      border="1"
      :default-sort="{ prop: 'price', order: 'descending' }"
      :data="tableData"
      style="width: 97%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column fixed prop="po" label="订单号" width="100px" />
      <el-table-column prop="mobile" label="手机号" width="120px" />
      <el-table-column prop="name" label="乘车人" />
      <el-table-column prop="date" label="预定时间" width="160px" />
      <el-table-column prop="train" label="车次" />
      <el-table-column prop="line" label="出发站" width="160px" />
      <el-table-column prop="line1" label="到达站" width="160px" />
      <el-table-column prop="state" label="状态" />
      <el-table-column prop="price" label="票价" />
      <el-table-column label="车厢座位号" width="113px">
        <template #default="scope">
          0{{ scope.row.car }}车{{ scope.row.num }}座位
        </template>
      </el-table-column>
      <el-table-column prop="type" label="座位" />
      <el-table-column label="操作" width="160px" fixed="right">
        <template #default="scope">
          <el-popconfirm
            width="230"
            @confirm="() => del(scope.row.id)"
            :title="'确定删除订单 ' + scope.row.po + '?'"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button size="small" type="success" @click="edit(scope.row)"
            >编辑订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑弹框  -->
    <el-dialog
      v-model="show"
      title="修改订单"
      :style="{height:'60%',width:'90%'}"
      :before-close="show === false"
    >
      <el-form :model="form" class="form" :inline="true">
        <el-form-item>
          <a> 订单号</a>
          <el-input disabled v-model="form.po" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <a> 姓名</a>
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <a> 手机号</a>
          <el-input v-model="form.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item>
          <a> 车次</a>
          <el-input v-model="form.train" placeholder="请输入车次" />
        </el-form-item>
        <el-form-item>
          <a> 出发站</a>
          <el-input v-model="form.line" placeholder="请输入出发站" />
        </el-form-item>
        <el-form-item>
          <a> 到达站</a>
          <el-input v-model="form.line1" placeholder="请输入到达站" />
        </el-form-item>
        <el-form-item>
          <a> 票价</a>
          <el-input v-model="form.price" placeholder="请输入票价" />
        </el-form-item>
        <!-- 类型 -->

        <el-form-item label=" ">
          <a> 车厢</a>
          <el-input v-model="form.car" placeholder="请输入车厢" />
        </el-form-item>
        <el-form-item>
          <a> 座位号</a>
          <el-input v-model="form.num" placeholder="请输入座位号" />
        </el-form-item>
        <br />
        <el-form-item class="date1">
          <a> 座位类型 &emsp; </a>
          <el-select placeholder="Select" size="default" v-model="form.type">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item class="date1">
          <a> 预定时间 &emsp;</a>
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="请输入查询时间"
            :value-format="YYYY - MM - DD"
            :default-value="new Date(2022, 8, 27)"
          />
        </el-form-item>
      </el-form>
      <el-form-item class="bot">
        <el-button type="primary" @click="EditSub()" size="large">
          修改订单
        </el-button>
        <el-button @click="show = false" size="large"> 取消 </el-button>
      </el-form-item>
    </el-dialog>
  </div>
</template>

<script>
import { OrderEdit, HttpState, Ordersdel } from "api";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      show: false,
      tableData: [],
      multipleSelection: [],
      form: {
        po: "",
        name: "",
        mobile: "",
        train: "",
        line: "",
        line1: "",
        price: "",
        type: "软座",
        car: 1,
        num: 2,
        date: "",
        state: "",
      },
      options: ["软座", "硬座", "软卧", "硬卧"],
    };
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    async del(id) {
      const res = await Ordersdel({ id });
      ElMessage({
        message: res.data.msg,
      });
      this.$emit("getlist");
    },
    async SetState(id) {
      const res = await HttpState({ id });
      ElMessage({
        type: "warning",
        message: res.data.msg,
      });
      this.$emit("getlist");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async Subdel() {
      this.multipleSelection.map(async (v) => {
        const res = await Ordersdel({ id: v.id });
        ElMessage({
          type: "warning",
          message: res.data.msg,
        });
        this.$emit("getlist");
      });
    },
    async edit(row) {
      this.show = true;
      this.form = { ...row };
    },
    async EditSub() {
      const res = await OrderEdit({ ...this.form });
      console.log(res);
      ElMessage({
        message: res.data.msg,
        type: res.data.code === 200 ? "success" : "warning",
      });
      this.show = false;
      this.$emit("getlist");
    },
  },
};
</script>
<style lang="scss" scoped>
.form {
  line-height: 60px;
  margin-left: 150px;
  a {
    width: 45px;
    font-size: 15px;
  }
  .el-input {
    width: 170px;
    margin-left: 5px;
  }
  .date1 {
    a {
      width: 66px;
      margin-top: 30px;
    }
    line-height: 30px;
  }
}
.bot {
  margin: 0px auto;
  height: 50px;
  width: 260px;
  .el-button {
    height: 40px;
    width: 120px;
  }
}
</style>
 